<template>
  <div class="login relative">
    <img class="login_bg absolute" src="@/assets/login/0.png" alt=""/>
    <div class="login_form absolute flex">
      <div class="login_form_left"></div>
      <div class="login_form_right relative">
        <LoginForm/>
      </div>
    </div>
  </div>
</template>
<script setup>
import LoginForm from "./components/LoginForm.vue"

</script>

<style lang="scss" scoped>
.login {
  width: 100vw;
  height: 100vh;
  
  &_form {
    top: 50%;
    left: 50%;
    z-index: 5;
    width: 1214px;
    height: 695px;
    background-image: url('/src/assets/login/1.png');
    background-size: 100% 100%;
    transform: translate(-50%, -50%);
    
    &_right {
      width: 708px;
      height: inherit;
    }
    
    &_left {
      width: calc(1214px - 708px);
      height: inherit;
      flex-shrink: 0;
    }
  }
  
  &_bg {
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
  }
}
</style>
